<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/602498 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="535"/>

<div>
<span><div><div><div>什么是渲染？就是把数据放到HTML标签中进行展示</div><div><br/></div><div>hi使用vue步骤</div><ol><li><div>导入vue.js库    <span style="background-color: rgb(30, 30, 30); font-size: 14px; white-space: pre; color: rgb(206, 145, 120); font-family: Consolas, &quot;Courier New&quot;, monospace; line-height: 19px;">vue.min.js</span></div></li><li><div><span style="font-size: 11pt; font-family: Consolas;">创建id为xxx的div  目的是为了定义div将此区域作为vue接管的区域 eg:&lt;div id=&quot;xxx&quot;&gt;{{xxx}}&lt;/div&gt;   双括号是插值表达式 可以获取Vue实例中的数据（data）</span></div></li><li><div><span style="font-size: 11pt; font-family: Consolas;">创建vue实例（在BODY下的script标签中编写） 代码：var xxx= new Vue({})</span></div></li><ol><li><div><span style="font-size: 11pt; font-family: Consolas;">el:挂载点：作用是定义vue示例挂载的元素节点，表示vue接管该区域   eg: el:&quot;#xxx&quot;, 通过#xxx选上面id为XXX的div ，div当中的所有内容都可以对vue的示例进行控制</span></div></li><li><div><span style="font-size: 11pt; font-family: Consolas;">data:Vue中用到的数据 定义在data中  data中可以定义 复杂数据</span></div></li></ol></ol><div><span style="font-size: 11pt;"><br/></span></div><div><span style="font-size: 11pt; font-family: Consolas;">v-show原理：根据修改元素display属性来实现显示和隐藏 值为true显示 false隐藏 数据改变后显示的状态会同步更新</span></div><div>v-if 指令</div></div><div>作用： 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )</div><div>v-if 指令总结：</div><ol><li><div>本质是通过操作dom元素</div></li><li><div>表达式为true 元素存在与dom树,为false从dom树中移除</div></li><li><div>频繁切换使用 v-show ,反之使用v-if</div></li></ol><div>. v-bind 指令</div><div>作用： 设置元素的属性 （比如:src,title,class）</div><div>语法格式: v-bind:属性名=表达式</div><div>v-bind指令总结：</div><ol><li><div>v-bind 指令的作用是： 为元素绑定属性</div></li><li><div>完整写法 v-bind:属性名，可以简写为 :属性名</div></li></ol><div>v-for 指令：</div><div>作用: 根据数据生成列表结构</div><div>v-for指令总结</div><ol><li><div>数组经常和 v-for结合使用,数组有两个常用方法:</div></li><ol><li><div>push() 向数组末尾添加一个或多个元素</div></li><li><div>shift() 把数组中的第一个元素删除</div></li></ol><li><div>语法是: (item,index) in 数据</div></li><li><div>item和index 可以结合其他指令一起使用</div></li><li><div>数组的长度变化,会同步更新到页面上,是响应式的</div></li></ol><div>v-on 指令补充</div><ol><li><div>传递自定义参数 : 函数调用传参</div></li><li><div>事件修饰符: 对事件触发的方式进行限制</div></li></ol><div>总结</div><ol><li><div>事件绑定方法,可以传入自定义参数</div></li><li><div>定义方法时,需要定义形参,来接收实际的参数</div></li><li><div>事件的后面跟上 .修饰符 可以对事件进行限制</div></li><li><div>.enter 可以限制触发的按键为回车</div></li><li><div>事件修饰符有许多 使用时可以查询文档</div></li></ol><div><br/></div><div>MVVM模式</div><ol><li><div>MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式</div></li><li><div>MVVM模式将页面,分层了 M 、V、和VM ,解释为：</div></li><ol><li><div>Model: 负责数据存储</div></li><li><div>View: 负责页面展示</div></li><li><div>View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示</div></li></ol><li><div>可以把DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。</div></li><li><div>MVVM的思想,主要是为了让我们的开发更加的方便,因为MVVM提供了数据的双向绑定</div></li></ol><div><br/></div><div>v-mode 指令</div><div>作用: 获取和设置表单元素的值(实现双向数据绑定)</div><ol><li><div>双向数据绑定</div></li></ol><ol><ol><li><div>单向绑定: 就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动 更新。</div></li><li><div>双向绑定: 用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。</div></li></ol></ol><div><span>    </span><span>    2.</span> 什么情况下用户可以更新View呢？</div><ol><ol><li><div>填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时 MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定</div></li></ol></ol><div><br/></div><div><br/></div><div>v-model指令总结</div><ol><li><div>v-model 指令的作用是便捷的设置和获取表单元素的值</div></li><li><div>绑定的数据会和表单元素值相关联</div></li><li><div>双向数据绑定</div></li></ol><div><br/></div><div>axios</div><div>作用：</div><ol><li><div>Ajax  可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分 进行更新（局部更新）。传统的网页如果需要更新内容，必须重载整个网页页面。</div></li><li><div>简单记: Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术, 维护用户体验 性, 进行网页的局部刷新.</div></li></ol><div><br/></div><div><br/></div><div><span style="color: unset; font-family: unset; font-size: unset;">同步与异步</span></div><ol><li><div>同步：客户端必须等待服务器的响应，在等待期间，客户端不能进行其他的操作</div></li><li><div>异步：客户端不需要等待服务器的响应，在服务器对请求进行处理时，客户端可以进行其他的操作</div></li></ol><div>axios语法： axios.get(地址?key=value&amp;key2=value2).then(function(response){},function(error))</div><div>                                URL                   就是携带的数据                     请求完成              请求失败</div><div><br/></div><div>axios.post(地址,{key:value,key2:value2}).then(function(response){},function(error){})</div><div><br/></div><div>axios总结：</div><ol><li><div>axios 必须导包才能使用</div></li><li><div>使用get或者post方法,就可以发送请求</div></li><li><div>then方法中的回调函数,会在请求成功或者请求失败的时候触发</div></li><li><div>通过回调函数的形参可以获取响应的内容,或者错误信息</div></li></ol><div><br/></div><div>解决页面闪烁问题： v-cloak指令</div><div> 作用: 解决插值表达式闪烁问题</div><div>代码示例：&lt;style&gt;</div><div><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>/* 通过属性选择器,设置 添加了v-cloak */</div><div><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    [v-cloak] {</span></div><div><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span> <span>    </span><span>    </span><span>    </span>display: none;</div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>}</span><br/></div><div><span><br/></span></div><div><span>    </span><span>    </span><span>    </span><span>    </span>&lt;/style&gt;</div><div><br/></div><div><br/></div><div><br/></div><div>computed 计算属性</div><div>什么是计算属性: 在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂 时，就会变得臃肿甚至难以维护和阅读</div><div>computed 的作用: 减少运算次数, 缓存运算结果. 运用于重复相同的计算.</div><div><br/></div><div>computed总结</div><ol><li><div>定义函数也可以实现与 计算属性相同的效果,都可以简化运算。</div></li><li><div>不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会 重新求值。</div></li></ol><div><br/></div><div><br/></div><div>filter 过滤器</div><div>     </div><div>过滤器: 过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原 来的数据，只是在原数据的基础上产生新的数据。</div><div><br/></div><div>过滤器使用位置:</div><ol><li><div>双括号插值内</div></li><ol><li><div>eg： {{ msg | filterA }} msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道 将数据传输给过滤器进行过滤 加工操作</div></li></ol><li><div>v-bind绑定的值的地方</div></li><ol><li><div>eg:&lt;h1 v-bind=&quot;msg | filterA&quot;&gt; {{ msg }} &lt;/h1&gt;</div></li></ol></ol><div><br/></div><div>总结：</div><ol><li><div>过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式</div></li><li><div>过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示</div></li></ol><div><br/></div><div>watch 侦听器</div><div>什么是侦听器： Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。</div><div>作用： 当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性</div><div><br/></div><div>Component 组件</div><div>组件介绍： 组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复 的，而且很多不同的页面之间，也存在同样的功能。</div><div>vue的组件有两种: 全局组件 和 局部组件</div><div>注意：</div><ol><li><div>组件名以小写开头，采用短横线分割命名     eg: hello-Word</div></li><li><div>组件中的data 必须是一个函数,注意与Vue实例中的data区分</div></li><li><div>在template模板中, 只能有一个根元素</div></li></ol><div><span><br/></span></div><div><span> </span> 局部组件: 相比起全局组件，局部组件只能在同一个实例内才能被调用。局部组件的写法和全局组件差不多。 唯 一不同就是：局部组件要写在Vue实例里面。</div><div><span>注意：</span>创建局部组件，注意 components，注意末尾有 ‘s’，而全局组件是不用+ ‘s’ 的。这意味着， components 里可以创建多个组件。<br/></div><div><br/></div><div>钩子函数</div><div>钩子函数：钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作</div><div><span>    </span><span>    </span><span>    函数<span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>  说明</span></span><br/></div><div>beforeCreate()                 在创建Vue实例之前,可以执行这个方法. 例如 加载动画操作</div><div>created()                            实例创建完成,属性绑定好了,但是DOM还没有生成.</div><div>beforeMount() <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>模板已经在内存中编辑完成了，尚未被渲染到页面中.</div><div>mounted() <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>内存中的模板已经渲染到页面，用户已经可以看见内容.</div><div>beforeUpdate() <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>数据更新的前一刻 , 组件在发生更新之前,调用的函数</div><div>updated() <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>updated执行时，内存中的数据已更新，并且页面已经被渲染</div><div>beforeDestroy () <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>钩子函数在实例销毁之前调用</div><div>destroyed () <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>钩子函数在Vue 实例销毁后调用</div><div><br/></div><div><br/></div><div>Vue Router 路由</div><div>什么是路由?： 在Web开发中，路由是指根据URL分配到对应的处理程序。 路由允许我们通过不同的 URL 访问不同的 内容， 通过 Vue.js 可以实现多视图单页面web应用（single page web application，SPA）</div><div><br/></div><div>什么是SPA ： 单页面Web应用（single page web application，SPA），就是只有一张Web页面的应用， 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。</div><div><br/></div><div><br/></div><div><br/></div><div>路由相关概念:</div><ol><li><div>router : 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得易 如反掌 ,router 就相当于一个管理者，它来管理路由。</div></li><li><div>route: router相当于路由器, route就相当于一条路由.比如: Home按钮  =&gt; home内容， 这是一条route,  news按钮 =&gt; news内容， 这是另一条路由。</div></li><li><div>routes : 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =&gt;home内容 }， { about按钮 =&gt; about 内容}]</div></li><li><div>router-link组件: router-link 是一个组件，是对标签的一个封装. 该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容</div></li><li><div>router-view 组件: 路由导航到指定组件后,进行渲染显示页面.</div></li></ol><div><br/></div><div>使用路由步骤：</div><ol><li><div>定义路由所需的组件</div></li><li><div>定义路由 每个路由都由两部分 path (路径) 和component (组件)</div></li><li><div>创建router路由器实例 ,管理路由</div></li><li><div>创建Vue实例, 注入路由对象, 使用$mount() 指定挂载点</div></li></ol><div><br/></div><div>说明：Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等）， 之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。</div><div><br/></div><div>路由总结：</div><ol><li><div>router是Vue中的路由管理器对象,用来管理路由.</div></li><li><div>route是路由对象,一个路由就对应了一条访问路径,一组路由用routes表示</div></li><li><div>每个路由对象都有两部分 path(路径)和component (组件)</div></li><li><div>router-link 是对a标签的封装,通过to属性指定连接</div></li><li><div>router-view 路由访问到指定组件后,进行页面展示</div></li></ol><div><br/></div><div><br/></div><div><br/></div><div><span style="color: unset; font-family: unset;"><b><font style="font-size: 16pt;">vue-cli(vue脚手架)</font></b></span><br/></div><div>查看npm包路径 指令 ：npm config ls</div><div><br/></div><div>vue项目结构说明</div><div>node_modules: 存放依赖包目录</div><div>public：静态资源管理目录</div><div>src：组件源码目录</div><div>      assets：存放静态图片资源</div><div>      components：存放各种组件</div><div>      router：存放项目路由文件</div><div>      views：放置的是公共组件（还是各个主要页面）</div><div>      App.vue：vue项目的主组件 是项目页面的入口文件</div><div>      main.js：打包运行的入口文件</div><div>.browserslistrc：</div><div>.gitignore</div><div>babel.config.js：babel相关的配置文件</div><div>{}package-lock.json：项目的依赖配置文件 就是类似于maven的prom.xml</div><div>{}package.json：项目的依赖配置文件  就是类似于maven的prom.xml</div><div>readme.md</div><div><br/></div><div><br/></div><div>vue项目中 后缀是.vue的文件就是组件</div><div>页面级别的组件是存放在views目录中</div><div>可复用的基础组件放到components目录中 可以被其他页面重复使用(引用)</div><div><br/></div><div><br/></div><div>组建的组成部分：</div><div>template: 组建的HTML部分</div><div>script:组建的JS脚本(使用ES6语法编写)</div><div>style:组建的CSS样式</div><div><br/></div><div><br/></div><div>脚手架项目运行流程</div><div>1.项目运行会加载  入口文件main.js</div><div>在vue中使用import变量名from文件路径</div><div>import Vue from 'vue'</div><div>import App from './App.vue'  主组件</div><div>import router from './router'  路由</div><div><br/></div><div><br/></div><div><br/></div><div>安装Vue-cli步骤</div><div><br/></div><div>安装Node.js  相关指令： node -v   显示当前node的版本</div><div><span style="color: unset; font-family: unset; font-size: unset;">安装NPM    相关质量：</span> npm -v      显示当前npm的版本<br/></div><div>查看包管理路径:    npm config ls</div><div>设置包管理路径： npm config set prefix &quot;H:\software\nodejs_package\npm_modules&quot; </div><div><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>npm config set cache &quot;H:\software\nodejs_package\npm_cache&quot;</div><div><br/></div><div>NPM环境变量配置： npm config get prefix（查看npm的全局路径）</div><div>配置PATH环境变量：</div><ol><li><div>添加新的系统变量: key=NODE_HOME , value= H:\software\nodejs_package</div></li><li><div>path中添加 %NODE_HOME%\npm_modules</div></li></ol><div>安装cnpm： 联网情况下, 输入命令，进行全局安装淘宝镜像: npm install -g cnpm --registry=<a href="https://registry.npm.taobao.org/">https://registry.npm.taobao.org</a></div><div>查看cnpm的版本：  cnpm -v</div><div><br/></div><div>安装vue-cli：</div><div>安装命令： npm install -g @vue/cli    输入 vue命令：vue  在输入： vue -V 查看版本</div><div><br/></div><div>快速构建Vue项目：</div><ol><li><div>桌面创建一个空的文件夹</div></li><li><div>以管理员身份运行cmd , 进入到vueTest文件夹</div></li><li><div>创建项目指令：vue create xx-xxx</div></li><li><div>进入项目目录: cd xx-xxx</div></li><li><div>启动项目： npm run serve</div></li></ol><div><br/></div><div>Vue脚手架自定义配置:</div><ol><li><div>package.js 介绍： 每个项目的根目录下面，一般都有一个 package.json 文件，定义了这个项目所需要的各种模 块，以及项目的配置信息（比如名称、版本、许可证等元数据）。 npm install 命令根据这个配置文 件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。</div></li><li><div>通过package.json 配置项目, 配置内容采用JSON格式,所有的内容都用双引号包裹, 打开package.json,再最末端添加配置</div></li><ol><li><div>配置说明: 该配置设置打包时服务器相关的信息</div></li><ol><li><div>port : 访问端口</div></li><li><div>open true: 打包完成自动打开浏览器</div></li></ol></ol><li><div>单独的配置文件配置项目</div></li><ol><li><div>在项目的根目录创建文件 vue.config.js</div></li><li><div>删除掉package中新添加的配置项.</div></li><li><div>在vue.config.js 文件中进行相关配置</div></li><li><div>代码实例： module.exports = { devServer:{ open:true port:8889 } }</div></li></ol><li><div>Vue 组件化开发</div></li><ol><li><div>组件化开发： 组件化是Vue的精髓，Vue项目就是由一个一个的组件构成的。 我们主要的工作就是开发的组件.</div></li><li><div>组件介绍</div></li><ol><li><div>我们用 vue-cli 脚手架搭建的项目，里面有很多，如 index.vue 或者 App.vue 这一类的文件. 每一个*.vue 文件都是一个组件 ，是一个自定义的文件类型, 比如 App.vue 就是整个项目的根组件。</div></li><li><div>常见的组件：</div></li><ol><li><div>页面级别的组件：通常是 views 目录下的.vue组件，是组成整个项目的各个主要页面</div></li><li><div>业务上可复用的基础组件 ：这一类组件通常是在业务中被各个页面复用的组件，这一类组件通常都写到 components 目 录下，然后通过import在各个页面中使用</div></li></ol><li><div>组件的组成部分</div></li><ol><li><div>template : 组件的HTML部分</div></li><li><div>script: 组件的JS脚本 (使用ES6语法编写)</div></li><li><div>style: 组件的CSS样式</div></li></ol></ol></ol><li><div>Vue项目运行流程</div></li><ol><li><div>项目运行 会加载入口文件 main.js</div></li><li><div>App.vue 是vue项目的主组件，是页面入口文件 ，所有页面都是在App.vue下进行切换的</div></li><li><div>router 路由</div></li><ol><li><div>找到路由文件 看具体的配置</div></li></ol><li><div>Home.vue组件： 默认访问的是Home.vue 首页</div></li></ol></ol><div><br/></div><div>Element-UI： 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建</div><div><br/></div><div>Element-UI使用</div><ol><li><div>命令行方式安装</div></li><ol><li><div>创建 一个新的项目</div></li><li><div>npm i element-ui -S      -&gt;   当前项目下打开终端, 安装依赖包 的命令</div></li><li><div>打开 main.js , 导入Element-UI 相关资源.： main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、 VueRouter等。</div></li><li><div>复制Element 按钮样式 到app.vue文件的 template下</div></li><li><div>启动项目 npm run serve</div></li></ol></ol><div><br/></div><div>Vue-CLI工程改造</div><ol><li><div>. 删除components 目录下的 HelloWord.vue组件</div></li><li><div>删除App.vue中的部分内容,只保留如下部分</div></li><li><div>删除router文件下的路由文件 index.js部分内容,只保留如下部分</div></li><ol><ol><ol><ol><ol><ol><li><div><font color="#41AD1C">import Vue from 'vue'</font></div></li><li><div><font color="#41AD1C">import VueRouter from 'vue-router'</font></div></li><li><div><font color="#41AD1C">Vue.use(VueRouter) const routes = []</font></div></li><li><div><span style="color: rgb(65, 173, 28);">const router = new VueRouter({ routes }) </span></div></li><li><div><span style="color: rgb(65, 173, 28);">export default router</span></div></li></ol></ol></ol></ol></ol></ol><li><div>删除views目录下的 About.vue 与 Home.vue</div></li></ol><div><br/></div><div>安装axios</div><ol><li><div>npm安装：使用npm下载axios包      npm i axios</div></li><li><div>在main.js文件中导入axios 相关资源    代码： 引入axios： import axios from 'axios'       Vue对象使用axios： Vue.prototype.axios = axios;</div></li></ol><div><br/></div><div><br/></div><div>布局容器</div><div>Container 布局容器 ,是用于布局的容器组件，方便快速搭建页面的基本结构  （代码在官方文档中有）</div><div><br/></div><div>什么是跨域： 跨域是指通过JS在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，只要协 议、域名、端口有任何一个不同，都被当作是不同的域,浏览器就不允许跨域请求。</div><div><br/></div><div>解决跨域问题：</div><div>在POM文件中引入依赖</div><div><span style="color: unset; font-family: unset; font-size: unset;">在web.xml中 配置跨域 filter </span><br/></div><div><span style="color: unset; font-family: unset; font-size: unset;">注：我在lagou_edu_home中已经做了配置</span></div><div><span style="color: unset; font-family: unset; font-size: unset;"><br/></span></div><div>ElementUI输入框组件： Input 输入框通过鼠标或键盘输入字符</div><div>input为受控组件 他总会显示Vue绑定值，通常情况下 应当处理input事件 并更新组建的绑定值（或使用v-model）,否则，输入框内显示的值将不会改变。，不支持v-model修饰符</div><div>Layout 布局</div><ol><li><div>通过基础的 24 分栏，迅速简便地创建布局。</div></li><li><div>通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。</div></li></ol><div><br/></div><div>前后端项目接口联调</div><ol><li><div>联调准备</div></li><ol><li><div>运行后台项目</div></li><ol><li><div>clean 清空项目的编译文件</div></li><li><div>compile 重新编译项目</div></li><li><div>将项目部署到 tomcat</div></li><ol><li><div>项目名为: lagou_edu_home</div></li><li><div>端口号: 8080</div></li></ol><li><div>部署图片上传路径为 webapps目录下的 upload目录</div></li></ol><li><div>运行前端项目</div></li><ol><li><div>首先导入前端项目到 VSCode</div></li><li><div>运行项目</div></li></ol></ol></ol><div>FormData的主要用途：</div><ol><li><div>将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接， 提高工作效率。</div></li><li><div>异步上传文件</div></li><li><div>创建FormData对象</div></li></ol><div>代码实例：</div><div>//通过FormData构造函数创建一个空对象 </div><div>var formdata=new FormData(); </div><div>//可以通过append()方法来追加数据 </div><div>formdata.append(&quot;name&quot;,&quot;laotie&quot;); </div><div>//通过get方法对值进行读取 </div><div>console.log(formdata.get(&quot;name&quot;));//laotie</div><div> //通过set方法对值进行设置 </div><div>formdata.set(&quot;name&quot;,&quot;laoliu&quot;); </div><div>console.log(formdata.get(&quot;name&quot;));//laoliu</div><div>//5.创建FormData对象,将图片与表单一同上传 </div><div>this.params = new FormData(); </div><div>methods添加方法 </div><div>//文件上传 </div><div>onchange(file) { </div><div>//判断文件不为空</div><div> if (file != null) { </div><div>//将文件信息 保存到params中 </div><div>this.params.append(&quot;file&quot;, file.raw, file.name); </div><div>} },</div><div><br/></div><div>Tree树形控件：用清晰的层级结构展示信息，可以展开或者折叠</div><div>Tree组件属性分析</div><ol><li><div>data: 展示数据</div></li><li><div>props : 配置树形结构</div></li><ol><li><div>label : 设置节点名称</div></li><li><div>children: 指定生成子树的属性名称</div></li></ol></ol><div><br/></div><div>自定义树节点内容:</div><ol><li><div>data: 数据对象</div></li><li><div>node: 节点对象</div></li></ol><div><br/></div><div><br/></div><div><br/></div><div>后台接口问题解决</div><ol><li><div>BaseServlet中代码修改.equals(contentType)改为  .equalsIgnoreCase(contentType))</div></li><li><div>CourseContentServlet中的saveOrUpdateSection方法修改:</div></li><ol><li><div>//3.使用BeanUtils的 copyProperties方法,将map中的数据封装到section对象里</div></li><li><div>BeanUtils.copyProperties(section,map.get(&quot;section&quot;));</div></li></ol></ol><div><br/></div><div>解决冒泡事件的方法： @click.stop  在子元素中</div><div>Select选择器</div><ol><li><div>在之前的VueCLI项目中</div></li><li><div>在component目录下,添加一个组件, TestSelect.vue</div></li><li><div>在Index.vue组件中的导航菜单位置添加一个 Select选择器 导航. 注意： 要设置index的路径为 /select</div></li><li><div>在index.js 路由文件中进行配置,在布局路由中再添加一个子路由</div></li><ol><li><div>代码：</div></li><ol><li><div>{ path: &quot;/select&quot;, name: &quot;select&quot;, component: Select, },</div></li></ol></ol></ol><div><br/></div><div>select 选择器属性分析</div><ol><li><div>v-model: 的值为当前被选中的 el-option 的 value 属性值</div></li><li><div>el-option : 选项</div></li><ol><li><div>label 选项的标签名</div></li><li><div>value 选择的值</div></li></ol><li><div> 使用Select选择器展示状态信息</div></li></ol><div><br/></div><div><br/></div><div>注意：如果 v-for里面数据层次太多， 修改过数据变了，页面没有重新渲染，需手动强制刷新。</div><div>代码： @change=&quot;$forceUpdate()&quot; 强制刷新</div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div></div><div><br/></div></span>
</div></body></html> 